import {create} from 'zustand';
import ContainerDev from "../editor/materials/Box/Container/dev";
import ContainerProd from "../editor/materials/Box/Container/prod";
import ButtonDev from "../editor/materials/Button/dev";
import ButtonProd from "../editor/materials/Button/prod";
import PageDev from "../editor/materials/Page/dev";
import PageProd from "../editor/materials/Page/prod";
import {devtools} from 'zustand/middleware';
import ModalDev from "../editor/materials/Modal/dev.tsx";
import ModalProd from "../editor/materials/Modal/prod.tsx";
import CarouselDev from "../editor/materials/Carousel/dev.tsx";
import TableDev from "../editor/materials/Table/dev.tsx";
import TableProd from "../editor/materials/Table/prod.tsx";
import TableColumnProd from "../editor/materials/Table/TableColumn/prod.tsx";
import TableColumnDev from "../editor/materials/Table/TableColumn/dev.tsx";
import CarouselItemDev from "../editor/materials/Carousel/CarouselItem/dev.tsx";
import CarouselItemProd from "../editor/materials/Carousel/CarouselItem/prod.tsx";
import CarouselProd from "../editor/materials/Carousel/prod.tsx";
import FormDev from "../editor/materials/FormContainer/Form/dev.tsx";
import TextInputDev from "../editor/materials/FormContainer/TextInput/dev.tsx";
import TextInputProd from "../editor/materials/FormContainer/TextInput/prod.tsx";
import FormProd from "../editor/materials/FormContainer/Form/prod.tsx";
// import CheckboxDev from "../editor/materials/FormContainer/Checkbox/dev.tsx";
// import CheckboxProd from "../editor/materials/FormContainer/Checkbox/prod.tsx";
import SelectProd from "../editor/materials/FormContainer/Select/prod.tsx";
import SelectDev from "../editor/materials/FormContainer/Select/dev.tsx";
import InputNumberDev from "../editor/materials/FormContainer/InputNumber/dev.tsx";
import InputNumberProd from "../editor/materials/FormContainer/InputNumber/prod.tsx";
// import RadioDev from "../editor/materials/FormContainer/Radio/dev.tsx";
// import RadioProd from "../editor/materials/FormContainer/Radio/prod.tsx";
import FlexDev from "../editor/materials/Box/Flex/dev.tsx";
import FlexProd from "../editor/materials/Box/Flex/prod.tsx";
import GridDev from "../editor/materials/Box/Grid/dev.tsx";
import GridProd from "../editor/materials/Box/Grid/prod.tsx";
import DatePickerProd from "../editor/materials/FormContainer/DatePicker/DatePicker/prod.tsx";
import DatePickerDev from "../editor/materials/FormContainer/DatePicker/DatePicker/dev.tsx";
import RangePickerDev from "../editor/materials/FormContainer/DatePicker/RangePicker/dev.tsx";
import RangePickerProd from "../editor/materials/FormContainer/DatePicker/RangePicker/prod.tsx";
import SwitchProd from "../editor/materials/FormContainer/Swicth/prod.tsx";
import SwitchDev from "../editor/materials/FormContainer/Swicth/dev.tsx";
// import SliderProd from "../editor/materials/FormContainer/Slider/prod.tsx";
// import SliderDev from "../editor/materials/FormContainer/Slider/dev.tsx";
import CascaderProd from "../editor/materials/FormContainer/Cascader/prod.tsx";
import CascaderDev from "../editor/materials/FormContainer/Cascader/dev.tsx";
import TextAreaProd from "../editor/materials/FormContainer/TextArea/prod.tsx";
import TextAreaDev from "../editor/materials/FormContainer/TextArea/dev.tsx";
import EmailInputDev from "../editor/materials/FormContainer/EmailInput/dev.tsx";
import EmailInputProd from "../editor/materials/FormContainer/EmailInput/prod.tsx";
import TreeSelectDev from "../editor/materials/FormContainer/TreeSelect/dev.tsx";
import TreeSelectProd from "../editor/materials/FormContainer/TreeSelect/prod.tsx";
import {CSSProperties} from "react";
import PhoneInputDev from "../editor/materials/FormContainer/PhoneInput/dev.tsx";
import PhoneInputProd from "../editor/materials/FormContainer/PhoneInput/prod.tsx";

export interface ComponentSetter {
    name: string;
    label: string;
    type: string;

    [key: string]: any;
}

export interface ComponentEvent {
    name: string
    label: string
}

export interface ComponentMethod {
    name: string
    label: string
}

export interface ComponentConfig {
    name: string;
    defaultProps: Record<string, any>, // 组件默认属性
    desc: string,
    materialType?: string
    setter?: ComponentSetter[]  // 保存属性表单的配置
    styles?: CSSProperties; // 保存样式表单的配置
    events?: ComponentEvent[];// 事件表单配置
    methods?: ComponentMethod[]; // 方法表单配置
    value?: any
    dev: any,
    prod: any
}

export interface FormRule {
    label: string;
    rule: {
        name: string;
        label: string;
        type: string;
        defaultValue: any
        placeholder?: string
        [key: string]: any
    }[]
}

interface State {
    componentConfig: { [key: string]: ComponentConfig };
    stylesSetter: ComponentSetter[],
    FormRule: FormRule[], // 表单校验规则
}

interface Action {
    registerComponent: (name: string, componentConfig: ComponentConfig) => void
}

export const useComponentConfigStore = create<State & Action>()
(devtools(
    (set) => ({
        componentConfig: {
            Container: {
                name: 'Container',
                defaultProps: {},
                desc: '容器',
                materialType: "container",
                dev: ContainerDev,
                prod: ContainerProd,
            },
            Flex: {
                name: "Flex",
                defaultProps: {},
                materialType: "container",
                setter: [
                    {
                        name: "vertical",
                        label: "排列方向",
                        type: "select",
                        options: [
                            {
                                label: "水平排列",
                                value: "row"
                            },
                            {
                                label: "垂直排列",
                                value: "column"
                            }
                        ]
                    }
                    ,
                    {
                        name: "wrap",
                        label: "换行方式",
                        type: "select",
                        options: [
                            {
                                label: "不换行",
                                value: "nowrap"
                            },
                            {
                                label: "换行",
                                value: "wrap"
                            },
                            {
                                label: "逆向换行",
                                value: "wrap-reverse"
                            }
                        ]
                    },
                    {
                        name: "justify",
                        label: "主轴对齐",
                        type: "select",
                        options: [
                            {
                                label: "起点对齐",
                                value: "flex-start"
                            },
                            {
                                label: "终点对齐",
                                value: "flex-end"
                            },
                            {
                                label: "居中对齐",
                                value: "center"
                            },
                            {
                                label: "两端对齐",
                                value: "space-between"
                            },
                            {
                                label: "环绕对齐",
                                value: "space-around"
                            },
                            {
                                label: "均匀对齐",
                                value: "space-evenly"
                            }

                        ]
                    },
                    {
                        name: "align",
                        label: "副轴对齐",
                        type: "select",
                        options: [
                            {
                                label: "起点对齐",
                                value: "start"
                            },
                            {
                                label: "终点对齐",
                                value: "end"
                            },
                            {
                                label: "居中对齐",
                                value: "center"
                            },
                            {
                                label: "文字基线对齐",
                                value: "baseline"
                            },
                            {
                                label: "拉伸对齐",
                                value: "stretch"
                            }
                        ]
                    },
                    {
                        name: "gap",
                        label: "元素间距",
                        type: "input",
                        placeholder: "eg:10px"
                    }
                ],
                desc: "Flex容器",
                dev: FlexDev,
                prod: FlexProd
            },
            Grid: {
                name: "Grid",
                defaultProps: {},
                materialType: "container",
                setter: [
                    {
                        name: "gridAutoFlow",
                        label: "排列方式",
                        type: "select",
                        options: [
                            {
                                label: "列优先",
                                value: "column"
                            },
                            {
                                label: "行优先",
                                value: "row"
                            }
                        ]
                    },
                    {
                        name: "gridTemplateColumns",
                        label: "等分列数",
                        type: "input",
                        placeholder: "eg:2"
                    },
                    {
                        name: "justifyContent",
                        label: "主轴对齐",
                        type: "select",
                        options: [
                            {
                                label: "起点对齐",
                                value: "start"
                            },
                            {
                                label: "终点对齐",
                                value: "end"
                            },
                            {
                                label: "居中对齐",
                                value: "center"
                            },
                            {
                                label: "两端对齐",
                                value: "space-between"
                            },
                            {
                                label: "环绕对齐",
                                value: "space-around"
                            },
                            {
                                label: "均匀对齐",
                                value: "space-evenly"
                            }

                        ]
                    },
                    {
                        name: "alignContent",
                        label: "副轴对齐",
                        type: "select",
                        options: [
                            {
                                label: "起点对齐",
                                value: "start"
                            },
                            {
                                label: "终点对齐",
                                value: "end"
                            },
                            {
                                label: "居中对齐",
                                value: "center"
                            },
                            {
                                label: "两端对齐",
                                value: "space-between"
                            },
                            {
                                label: "环绕对齐",
                                value: "space-around"
                            },
                            {
                                label: "均匀对齐",
                                value: "space-evenly"
                            }

                        ]
                    },
                    {
                        name: "justifyItem",
                        label: "单元格内容水平位置",
                        type: "select",
                        options: [
                            {
                                label: "起点对齐",
                                value: "start"
                            },
                            {
                                label: "终点对齐",
                                value: "end"
                            },
                            {
                                label: "居中对齐",
                                value: "center"
                            },
                            {
                                label: "拉伸",
                                value: "stretch"
                            }

                        ]
                    },
                    {
                        name: "alignItems",
                        label: "单元格的垂直位置",
                        type: "select",
                        options: [
                            {
                                label: "起点对齐",
                                value: "start"
                            },
                            {
                                label: "终点对齐",
                                value: "end"
                            },
                            {
                                label: "居中对齐",
                                value: "center"
                            },
                            {
                                label: "拉伸",
                                value: "stretch"
                            }
                        ]
                    },
                    {
                        name: "gap",
                        label: "元素间距",
                        type: "input",
                        placeholder: "eg:10px"
                    }
                ],
                desc: "Grid容器",
                dev: GridDev,
                prod: GridProd
            },
            Button: {
                name: 'Button',
                desc: '按钮',
                materialType: "basic",
                // 属性表单配置
                defaultProps: {
                    type: 'primary',
                    text: '按钮'
                },
                // 组件属性表单配置
                setter: [
                    {
                        name: 'type',
                        type: 'select',
                        label: '按钮类型',
                        options: [
                            {
                                label: '主按钮',
                                value: 'primary'
                            },
                            {
                                label: '次按钮',
                                value: 'secondary'
                            }
                        ]

                    },
                    {
                        name: 'text',
                        label: '文本',
                        type: 'input',
                    }
                ],
                // 组件
                dev: ButtonDev,
                prod: ButtonProd,
                events: [
                    {
                        name: 'onClick',
                        label: '点击事件',
                    },
                    {
                        name: 'onDoubleClick',
                        label: '双击事件'
                    },
                ],

            },
            Page: {
                name: 'Page',
                desc: '页面',
                defaultProps: {},
                dev: PageDev,
                prod: PageProd
            },
            Modal: {
                name: 'Modal',
                materialType: "container",
                defaultProps: {
                    title: '弹窗'
                },
                setter: [
                    {
                        name: 'title',
                        label: '标题',
                        type: 'input'
                    }
                ],
                stylesSetter: [],
                events: [
                    {
                        name: 'onOk',
                        label: '确认事件',
                    },
                    {
                        name: 'onCancel',
                        label: '取消事件'
                    },
                ],
                methods: [
                    {
                        name: 'open',
                        label: '打开弹窗',
                    },
                    {
                        name: 'close',
                        label: '关闭弹窗'
                    }
                ],
                desc: '弹窗',
                dev: ModalDev,
                prod: ModalProd
            },
            Carousel: {
                name: "Carousel",
                materialType: "basic",
                defaultProps: {
                    autoplay: true,
                },
                desc: "轮播组件",
                dev: CarouselDev,
                prod: CarouselProd,
                setter: [
                    {
                        name: 'autoplay',
                        label: '是否自动播放',
                        type: 'select',
                        options: [
                            {
                                label: '是',
                                value: true
                            },
                            {
                                label: '否',
                                value: false
                            }
                        ]

                    }
                ]
            },
            CarouselItem: {
                name: "CarouselItem",
                materialType: "basic",
                defaultProps: {
                    autoplay: "true",
                    url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                },
                setter: [
                    {
                        name: "url",
                        label: "图片地址",
                        type: "input"
                    }
                ],
                desc: "轮播图片",
                dev: CarouselItemDev,
                prod: CarouselItemProd,
            },
            Table: {
                name: "Table",
                materialType: "basic",
                prod: TableProd,
                dev: TableDev,
                desc: "表格",
                defaultProps: {},
                setter: [
                    {
                        name: "url",
                        label: "url",
                        type: "input",
                    }
                ],


            },
            TableColumn: {
                materialType: "basic",
                name: 'TableColumn',
                desc: '表格列',
                defaultProps: {
                    dataIndex: `col_${new Date().getTime()}`,
                    title: '列名'
                },
                setter: [
                    {
                        name: 'type',
                        label: '类型',
                        type: 'select',
                        options: [
                            {
                                label: '文本',
                                value: 'text',
                            },
                            {
                                label: '日期',
                                value: 'date',
                            },
                        ],
                    },
                    {
                        name: 'title',
                        label: '标题',
                        type: 'input',
                    },
                    {
                        name: 'dataIndex',
                        label: '字段',
                        type: 'input',
                    },
                ],
                dev: TableColumnDev,
                prod: TableColumnProd,
            },
            Form: {
                name: 'Form',
                desc: "表单",
                defaultProps: {},
                materialType: "form",
                setter: [
                    {
                        name: "title",
                        label: "标题",
                        type: "input"
                    },
                    {
                        name: "layout",
                        label: "表单布局方式",
                        type: "select",
                        options: [
                            {
                                label: '水平',
                                value: 'horizontal'
                            },
                            {
                                label: '垂直',
                                value: 'vertical'
                            },
                            {
                                label: '内联',
                                value: 'inline'
                            }
                        ]
                    }
                ],
                events: [
                    {
                        name: 'onFinish',
                        label: '提交事件',
                    }
                ],
                methods: [
                    {
                        name: "submit",
                        label: "提交表单",
                    }
                ],
                prod: FormProd,
                dev: FormDev,
            },
            TextInput: {
                name: 'TextInput',
                materialType: "form",
                desc: '文本框',
                defaultProps: {
                    label: '输入框',
                    type: "input"
                },
                styles: {
                    width: "200px"
                },
                setter: [
                    {
                        name: 'type',
                        label: '类型',
                        type: 'select',
                        options: [
                            {
                                label: '文本',
                                value: 'input',
                            },
                            {
                                label: '日期',
                                value: 'date',
                            },
                        ],
                    },
                    {
                        name: 'label',
                        label: '标题',
                        type: 'input',
                    },
                    {
                        name: 'rules',
                        label: '校验',
                        type: 'select',
                        options: [
                            {
                                label: '必填',
                                value: 'required',
                            },
                        ],
                    }
                ],
                dev: TextInputDev,
                prod: TextInputProd
            },
            // CheckboxInput: {
            //     name: 'CheckboxInput',
            //     materialType:"form",
            //     desc: '复选框',
            //     styles: {
            //         width: "200px"
            //     },
            //     defaultProps: {
            //         label: '复选框',
            //         type: "checkbox",
            //         options: [
            //             {
            //                 label: '选项1',
            //                 value: '选项1',
            //             },
            //             {
            //                 label: '选项2',
            //                 value: '选项2',
            //             },
            //         ],
            //     },
            //     setter: [
            //         {
            //             name: 'label',
            //             label: '标题',
            //             type: 'input',
            //         },
            //         {
            //             name: 'options',
            //             label: '选项',
            //             type: 'addOption',
            //
            //         }
            //     ],
            //
            //     dev: CheckboxDev,
            //     prod: CheckboxProd
            // },
            Select: {
                name: 'Select',
                materialType: "form",
                desc: "下拉框",
                styles: {
                    width: "200px"
                },
                defaultProps: {
                    label: '下拉框',
                    type: "select",
                    options: [
                        {
                            label: '选项1',
                            value: '选项1',
                        },
                        {
                            label: '选项2',
                            value: '选项2',
                        },
                    ]
                },
                setter: [
                    {
                        name: 'label',
                        label: "标题",
                        type: "input"
                    },
                    {
                        name: "mode",
                        label: "选择模式",
                        type: "select",
                        options: [
                            {
                                label: "单选",
                                value: "single"
                            },
                            {
                                label: "多选",
                                value: "multiple"
                            },
                            {
                                label: "标签",
                                value: "tags"
                            }

                        ]
                    },
                    {
                        name: "maxTagTextLength",
                        label: "tag最大显示字数",
                        type: "inputNumber"
                    },
                    {
                        name: "maxTagCount",
                        label: "tag最大显示数量",
                        type: "inputNumber"
                    },
                    {
                        name: 'options',
                        label: "下拉选项",
                        type: "addOption"
                    },
                    {
                        label: "数据编辑器",
                        type: "EditData",
                        name: "options"
                    }

                ],
                dev: SelectDev,
                prod: SelectProd,
            },
            InputNumber: {
                name: 'InputNumber',
                materialType: "form",
                desc: '数字输入',
                styles: {
                    width: "200px"
                },
                defaultProps: {
                    label: '数字输入',
                    type: "number",
                },
                setter: [
                    {
                        name: 'label',
                        label: '标题',
                        type: 'input',
                    },
                    {
                        name: 'name',
                        label: '字段',
                        type: 'input',
                    },
                ],
                dev: InputNumberDev,
                prod: InputNumberProd,
            },
            // Radio: {
            //     name: "Radio",
            //     desc: "单选框",
            //     materialType:"form",
            //     styles: {
            //         width: "200px"
            //     },
            //     defaultProps: {
            //         label: '单选框',
            //         type: "radio",
            //         options: [
            //             {
            //                 label: "选项1",
            //                 value: "选项1"
            //             },
            //             {
            //                 label: "选项2",
            //                 value: "选项2"
            //             }
            //         ]
            //     },
            //     setter: [
            //         {
            //             name: 'label',
            //             label: "标题",
            //             type: "input"
            //         },
            //         {
            //             name: 'options',
            //             label: "下拉选项",
            //             type: "addOption"
            //         },
            //         {
            //             name: "disabled",
            //             label: "是否禁止选择",
            //             type: "select",
            //             options: [
            //                 {
            //                     label: "是",
            //                     value: true
            //                 },
            //                 {
            //                     label: "否",
            //                     value: false
            //                 }
            //             ]
            //         },
            //         {
            //             name: "optionType",
            //             label: "Radio类型",
            //             type: "select",
            //             options: [
            //                 {
            //                     label: "默认",
            //                     value: "default"
            //                 },
            //                 {
            //                     label: "按钮",
            //                     value: "button"
            //                 }
            //             ]
            //         },
            //         {
            //             name: "buttonStyle",
            //             label: "按钮样式",
            //             type: "select",
            //             options: [
            //                 {
            //                     label: "描边",
            //                     value: "outline"
            //                 },
            //                 {
            //                     label: "填充",
            //                     value: "solid"
            //                 }
            //             ]
            //         },
            //         {
            //             name: "size",
            //             label: "按钮大小",
            //             type: "select",
            //             options: [
            //                 {
            //                     label: "大",
            //                     value: "large"
            //                 },
            //                 {
            //                     label: "中",
            //                     value: "middle"
            //                 },
            //                 {
            //                     label: "小",
            //                     value: "small"
            //                 }
            //             ]
            //         }
            //     ],
            //     dev: RadioDev,
            //     prod: RadioProd
            // },
            DatePicker: {
                name: 'DatePicker',
                materialType: "form",
                desc: "日期",
                styles: {
                    width: "200px"
                },
                defaultProps: {
                    label: '日期',
                },
                setter: [
                    {
                        label: "日期类型",
                        name: "picker",
                        type: "select",
                        options: [
                            {
                                label: "日期",
                                value: "date"
                            },
                            {
                                label: "年份",
                                value: "year"
                            },
                            {
                                label: "季度",
                                value: "quarter"
                            },
                            {
                                label: "月份",
                                value: "month"
                            },
                            {
                                label: "周",
                                value: "week"
                            },
                            {
                                label: "时间",
                                value: "time"
                            }
                        ]
                    },
                    {
                        label: "日期格式",
                        name: "format",
                        type: "select",
                        options: [
                            {
                                label: "年-月-日",
                                value: "YYYY-MM-DD"
                            },
                            {
                                label: "年-月-日 时:分:秒",
                                value: "YYYY-MM-DD HH:mm:ss"
                            },
                            {
                                label: "年",
                                value: "YYYY"
                            },
                            {
                                label: "年-月",
                                value: "YYYY-MM"
                            },
                            {
                                label: "季度",
                                value: "YYYY-qQ"
                            },
                            {
                                label: "周",
                                value: "YYYY-wo"
                            },
                            {
                                label: "24小时制 时:分:秒",
                                value: "HH:mm:ss"
                            },
                            {
                                label: "12小时制 时:分:秒",
                                value: "hh:mm:ss"
                            }

                        ]
                    },
                    {
                        label: "快捷日期",
                        name: "showNow",
                        type: "switch"
                    },
                    {
                        label: "显示时间",
                        name: "showTime",
                        type: "switch"
                    },
                    {
                        label: "是否禁用",
                        name: "disabled",
                        type: "switch"
                    },
                    {
                        label: "显示清除",
                        name: "allowClear",
                        type: "switch"
                    },
                ],
                dev: DatePickerDev,
                prod: DatePickerProd
            },
            RangePicker: {
                name: 'RangePicker',
                materialType: "form",
                desc: "日期范围",
                styles: {
                    width: "200px"
                },
                defaultProps: {
                    label: "日期范围",
                },
                setter: [
                    {
                        label: "开始字段",
                        name: "startField",
                        type: "input"
                    },
                    {
                        label: "结束字段",
                        name: "endField",
                        type: "input"
                    },
                    {
                        label: "日期类型",
                        name: "picker",
                        type: "select",
                        options: [
                            {
                                label: "日期",
                                value: "date"
                            },
                            {
                                label: "年份",
                                value: "year"
                            },
                            {
                                label: "季度",
                                value: "quarter"
                            },
                            {
                                label: "月份",
                                value: "month"
                            },
                            {
                                label: "周",
                                value: "week"
                            },
                            {
                                label: "时间",
                                value: "time"
                            }
                        ]
                    },
                    {
                        label: "日期格式",
                        name: "format",
                        type: "select",
                        options: [
                            {
                                label: "年-月-日",
                                value: "YYYY-MM-DD"
                            },
                            {
                                label: "年-月-日 时:分:秒",
                                value: "YYYY-MM-DD HH:mm:ss"
                            },
                            {
                                label: "年",
                                value: "YYYY"
                            },
                            {
                                label: "年-月",
                                value: "YYYY-MM"
                            },
                            {
                                label: "季度",
                                value: "YYYY-qQ"
                            },
                            {
                                label: "周",
                                value: "YYYY-wo"
                            },
                            {
                                label: "24小时制 时:分:秒",
                                value: "HH:mm:ss"
                            },
                            {
                                label: "12小时制 时:分:秒",
                                value: "hh:mm:ss"
                            }

                        ]
                    },
                    {
                        label: "快捷日期",
                        name: "showNow",
                        type: "switch"
                    },
                    {
                        label: "显示时间",
                        name: "showTime",
                        type: "switch"
                    },
                    {
                        label: "是否禁用",
                        name: "disabled",
                        type: "switch"
                    },
                    {
                        label: "显示清除",
                        name: "allowClear",
                        type: "switch"
                    },
                ],
                dev: RangePickerDev,
                prod: RangePickerProd
            },
            Switch: {
                name: 'Switch',
                materialType: "form",
                desc: "开关",
                styles: {
                    width: "200px"
                },
                defaultProps: {
                    label: "开关",
                },
                setter: [
                    {
                        label: "开启显示文字",
                        name: "checkedChildren",
                        type: "input"
                    },
                    {
                        label: "关闭显示文字",
                        name: "unCheckedChildren",
                        type: "input"
                    },
                    {
                        label: "是否默认开启",
                        name: "defaultChecked",
                        type: "switch"
                    },
                    {
                        label: "开关大小",
                        name: "size",
                        type: "select",
                        options: [
                            {
                                label: "默认",
                                value: "default"
                            },
                            {
                                label: "小",
                                value: "small"
                            }
                        ]
                    },
                    {
                        label: "是否禁用",
                        name: "disabled",
                        type: "switch"
                    },
                ],
                dev: SwitchDev,
                prod: SwitchProd
            },
            // Slider: {
            //     name: "Slider",
            //     materialType:"form",
            //     desc: "滑块选择器",
            //     styles: {
            //         width: "200px"
            //     },
            //     defaultProps: {
            //         label: "滑块选择器",
            //     },
            //     setter: [
            //         {
            //             label: "最大值",
            //             name: "max",
            //             type: "input"
            //         },
            //         {
            //             label: "最小值",
            //             name: "min",
            //             type: "input"
            //         },
            //         {
            //             label: "步长",
            //             name: "step",
            //             type: "input"
            //         },
            //         {
            //             label: "是否禁用",
            //             name: "disabled",
            //             type: "switch"
            //         },
            //         {
            //             label: "双滑块",
            //             name: "range",
            //             type: "switch"
            //         },
            //         {
            //             label: "反向坐标",
            //             name: "reverse",
            //             type: "switch"
            //         },
            //         {
            //             label: "开启垂直",
            //             name: "vertical",
            //             type: "switch"
            //
            //         }
            //     ],
            //     dev: SliderDev,
            //     prod: SliderProd
            // },
            Cascader: {
                name: "Cascader",
                materialType: "form",
                desc: "级联选择器",
                styles: {
                    width: "200px"
                },
                defaultProps: {
                    label: "级联选择器",
                    placeholder: "请选择",
                    options: [
                        {
                            value: 'zhejiang',
                            label: 'Zhejiang',
                            children: [
                                {
                                    value: 'hangzhou',
                                    label: 'Hangzhou',
                                    children: [
                                        {
                                            value: 'xihu',
                                            label: 'West Lake',
                                        },
                                    ],
                                },
                            ],
                        },
                        {
                            value: 'jiangsu',
                            label: 'Jiangsu',
                            children: [
                                {
                                    value: 'nanjing',
                                    label: 'Nanjing',
                                    children: [
                                        {
                                            value: 'zhonghuamen',
                                            label: 'Zhong Hua Men',
                                        },
                                    ],
                                },
                            ],
                        },
                    ]
                },
                setter: [
                    {
                        label: "是否禁用",
                        name: "disabled",
                        type: "switch"
                    },
                    {
                        label: "是否多选",
                        name: "multiple",
                        type: "switch"
                    },
                    {
                        label: "支持清除",
                        name: "allowClear",
                        type: "switch"
                    },
                    {
                        label: "显示搜索框",
                        name: "showSearch",
                        type: "switch"
                    },
                    {
                        label: "默认提示",
                        name: "placeholder",
                        type: "input",
                    },
                    {
                        label: "预设位置",
                        name: "placement",
                        type: "select",
                        options: [
                            {
                                label: "bottomLeft",
                                value: "bottomLeft"
                            },
                            {
                                label: "bottomRight",
                                value: "bottomRight"
                            },
                            {
                                label: "topLeft",
                                value: "topLeft"
                            },
                            {
                                label: "topRight",
                                value: "topRight"
                            }
                        ]
                    },
                    {
                        label: "子菜单展开方式",
                        name: "expandTrigger",
                        type: "select",
                        options: [
                            {
                                label: "click",
                                value: "click"
                            },
                            {
                                label: "hover",
                                value: "hover"
                            }
                        ]
                    },
                    {
                        label: "最大标签数量",
                        name: "maxTagCount",
                        type: "inputNumber"
                    },
                    {
                        label: "数据编辑器",
                        type: "EditData",
                        name: "options"
                    }
                ],
                dev: CascaderDev,
                prod: CascaderProd
            },
            TextArea: {
                name: "TextArea",
                materialType: "form",
                desc: "多行文本",
                styles: {
                    width: "200px"
                },
                defaultProps: {
                    label: "多行文本",
                    placeholder: "请输入内容",
                },
                setter: [
                    {
                        label: "最大字数",
                        name: "maxLength",
                        type: "inputNumber"
                    },
                    {
                        label: "是否禁用",
                        name: "disabled",
                        type: "switch"
                    },
                    {
                        label: "显示字数",
                        name: "showCount",
                        type: "switch"
                    },
                    {
                        label: "自动适应",
                        name: "autoSize",
                        type: "switch"
                    },
                    {
                        label: "显示删除",
                        name: "allowClear",
                        type: "switch"
                    }

                ],
                dev: TextAreaDev,
                prod: TextAreaProd
            },
            EmailInput: {
                materialType: "form",
                name: "EmailInput",
                desc: "邮箱",
                styles: {
                    width: "200px"
                },
                defaultProps: {
                    label: "邮箱",
                    placeholder: "请输入邮箱",
                },
                setter: [
                    {
                        label: "最大字数",
                        name: "maxLength",
                        type: "inputNumber"
                    },
                    {
                        label: "是否禁用",
                        name: "disabled",
                        type: "switch"
                    },
                ],
                dev: EmailInputDev,
                prod: EmailInputProd
            },
            /* Upload: {
                name: "Upload",
                materialType:"form",
                desc: "上传文件",
                defaultProps: {
                    label: "上传文件",
                },
                setter: [
                    {
                        label: "最大文件大小",
                        name: "maxSize",
                        type: "input"
                    },
                    {
                        label: "是否禁用",
                        name: "disabled",
                        type: "switch"
                    },
                    {
                        label: "文件类型",
                        name: "accept",
                        type: "select",
                        mode: "multiple",
                        options: [
                            {
                                label: "image/jpeg",
                                value: "image/jpeg"
                            },
                            {
                                label: "image/png",
                                value: "image/png"
                            },
                            {
                                label: "image/gif",
                                value: "image/gif"
                            },
                            {
                                label: "image/webp",
                                value: "image/webp"
                            },
                            {
                                label: "video/mp4",
                                value: "video/mp4"
                            },
                            {
                                label: "text/csv",
                                value: "text/csv"
                            },
                            {
                                label: "text/html",
                                value: "text/html"
                            },


                        ]
                    }
                ],
                dev: UploadDev,
                prod: UploadProd
            },*/
            PhoneInput: {
                name: "PhoneInput",
                materialType: "form",
                desc: "手机号",
                styles: {
                    width: "200px"
                },
                defaultProps: {
                    label: "手机号",
                    placeholder: "请输入手机号",
                },
                setter: [
                    {
                        label: "最大字数",
                        name: "maxLength",
                        type: "inputNumber"
                    },
                    {
                        label: "是否禁用",
                        name: "disabled",
                        type: "switch"
                    }
                ],
                dev: PhoneInputDev,
                prod: PhoneInputProd
            },
            TreeSelect: {
                name: "TreeSelect",
                materialType: "form",
                desc: "树形选择器",
                styles: {
                    width: "200px"
                },
                defaultProps: {
                    label: "树形选择器",
                    placeholder: "请选择",
                    treeData: [
                        {
                            value: 'parent 1',
                            title: 'parent 1',
                            children: [
                                {
                                    value: 'parent 1-0',
                                    title: 'parent 1-0',
                                    children: [
                                        {
                                            value: 'leaf1',
                                            title: 'leaf1',
                                        },
                                        {
                                            value: 'leaf2',
                                            title: 'leaf2',
                                        },
                                        {
                                            value: 'leaf3',
                                            title: 'leaf3',
                                        },
                                        {
                                            value: 'leaf4',
                                            title: 'leaf4',
                                        },
                                        {
                                            value: 'leaf5',
                                            title: 'leaf5',
                                        },
                                        {
                                            value: 'leaf6',
                                            title: 'leaf6',
                                        },
                                    ],
                                },
                                {
                                    value: 'parent 1-1',
                                    title: 'parent 1-1',
                                    children: [
                                        {
                                            value: 'leaf11',
                                            title: 'leaf11',
                                        },
                                    ],
                                },
                            ],
                        },
                    ]
                },
                setter: [
                    {
                        label: "是否禁用",
                        name: "disabled",
                        type: "switch"
                    },
                    {
                        label: "是否多选",
                        name: "multiple",
                        type: "switch"
                    },
                    {
                        label: "是否显示搜索框",
                        name: "showSearch",
                        type: "switch"
                    },
                    {
                        label: "是否支持清除",
                        name: "allowClear",
                        type: "switch"
                    },
                    {
                        label: "是否展开所有节点",
                        name: "treeDefaultExpandAll",
                        type: "switch"
                    },
                    {
                        label: "显示复选",
                        name: "treeCheckable",
                        type: "switch"
                    },
                    {
                        label: "是否展示线条",
                        name: "treeLine",
                        type: "switch"
                    },
                    {
                        label: "最大Tags文本显示长度",
                        name: "maxTagTextLength",
                        type: "inputNumber"
                    },
                    {
                        label: "最多显示tag数",
                        name: "maxTagCount",
                        type: "inputNumber"
                    },
                    {
                        label: "数据回显方式",
                        name: "showCheckedStrategy",
                        type: "select",
                        options: [
                            {
                                label: "显示所有",
                                value: "SHOW_ALL"
                            },
                            {
                                label: "显示父节点",
                                value: "SHOW_PARENT"
                            },
                            {
                                label: "显示子节点",
                                value: "SHOW_CHILD"
                            }
                        ]
                    },
                    {
                        label: "数据编辑器",
                        name: "treeData",
                        type: "dataEditor",
                        language: "json"
                    }
                ],
                dev: TreeSelectDev,
                prod: TreeSelectProd
            }
        },
        stylesSetter: [
            {
                name: 'width',
                label: '宽度',
                type: 'input',
            },
            {
                name: 'height',
                label: '高度',
                type: 'input',
            },
            {
                name: 'color',
                label: '文字颜色',
                type: 'color',
            },
            {
                name: 'fontSize',
                label: '文字大小',
                type: 'input',
            },
            {
                name: "margin",
                label: "外边距",
                type: "input"
            },
            {
                name: "fontWeight",
                label: "文字粗细",
                type: "select",
                options: [
                    {
                        label: "100 Thin",
                        value: "100"
                    },
                    {
                        label: "200 Extra-Light",
                        value: "200"
                    },
                    {
                        label: "300 Light",
                        value: "300"
                    },
                    {
                        label: "400 Normal",
                        value: "400"
                    },
                    {
                        label: "500 Medium",
                        value: "500"
                    },
                    {
                        label: "600 Semi-Bold",
                        value: "600"
                    },
                    {
                        label: "700 Bold",
                        value: "700"
                    },
                    {
                        label: "800 Extra-Bold",
                        value: "800"
                    },
                    {
                        label: "900 Black-Bold",
                        value: "900"
                    }
                ]
            },
            {
                name: "opacity",
                label: "透明度",
                type: "slider"
            },
            {
                name: 'backgroundColor',
                label: '背景颜色',
                type: 'backgroundColor',
            },
            {
                name: 'borderRadius',
                label: '圆角',
                type: 'input',
            },
            {
                name: 'border',
                label: '边框',
                type: 'input',
                placeholder: '例如：1px solid #fff',
            },


        ],
        FormRule: [
            {
                label: "必填校验",
                rule: [
                    {
                        name: "required",
                        label: "是否必填",
                        type: "switch",
                        defaultValue: true,
                    },
                    {
                        name: "message",
                        label: "错误提示信息",
                        type: "input",
                        defaultValue: "该项为必填项，不能为空",
                        placeholder: "错误提示"
                    }
                ]
            },
            {
                label: "长度校验",
                rule: [
                    {
                        name: "min",
                        label: "最小长度",
                        type: "inputNumber",
                        defaultValue: 1,
                        placeholder: "1"
                    },
                    {
                        name: "max",
                        label: "最大长度",
                        type: "inputNumber",
                        defaultValue: 20,
                        placeholder: "20"
                    },
                    {
                        name: "message",
                        label: "错误提示信息",
                        type: "input",
                        defaultValue: "请输入正确的长度",
                        placeholder: "错误提示"
                    }
                ]
            },
            {
                label: "手机号校验",
                rule: [
                    {
                        name: "pattern", // 正则表达式
                        label: "校验规则",
                        type: "input",
                        defaultValue: "^1[3456789]\\d{9}$",
                        placeholder: "eg:^[0-9]+$"
                    },
                    {
                        name: "message",
                        label: "错误提示信息",
                        type: "input",
                        defaultValue: "请输入正确的手机号",
                        placeholder: "错误提示"
                    }
                ]
            },
            {
                label: "邮箱验证",
                rule: [
                    {
                        name: "pattern",
                        label: "校验规则",
                        type: "input",
                        defaultValue: "^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+\\.[a-zA-Z0-9_-]+$",
                        placeholder: "eg:^[0-9]+$"
                    },
                    {
                        name: "message",
                        label: "错误提示信息",
                        type: "input",
                        defaultValue: "请输入正确的邮箱",
                        placeholder: "错误提示"
                    }
                ]

            },
            {
                label: "身份证号校验",
                rule: [
                    {
                        name: "pattern",
                        label: "校验规则",
                        type: "input",
                        defaultValue: "^[1-9]\\d{5}(18|19|20)\\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\\d{3}[0-9Xx]$",
                        placeholder: "eg:^[0-9]+$"
                    },
                    {
                        name: "message",
                        label: "错误提示信息",
                        type: "input",
                        defaultValue: "请输入正确的身份证号",
                        placeholder: "错误提示"
                    }
                ]
            },
            {
                label: "网址校验",
                rule: [
                    {
                        name: "pattern",
                        label: "校验规则",
                        type: "input",
                        defaultValue: "^https?:\/\/.*(\.).*$",
                        placeholder: "eg:^[0-9]+$"
                    }
                    ,
                    {
                        name: "message",
                        label: "错误提示信息",
                        type: "input",
                        defaultValue: "请输入正确的网址",
                        placeholder: "错误提示"
                    }
                ]

            },
            {
                label: "纯字母校验",
                rule: [
                    {
                        name: "pattern",
                        label: "校验规则",
                        type: "input",
                        defaultValue: "^[a-zA-Z]+$",
                        placeholder: "eg:^[0-9]+$"
                    },
                    {
                        name: "message",
                        label: "错误提示信息",
                        type: "input",
                        defaultValue: "只能输入英文",
                        placeholder: "错误提示"
                    }
                ]
            },
            {
                label: "纯数字校验",
                rule: [
                    {
                        name: "pattern",
                        label: "校验规则",
                        type: "input",
                        defaultValue: "^[0-9]+$",
                        placeholder: "eg:^[0-9]+$"
                    },
                    {
                        name: "message",
                        type: "input",
                        label: "错误提示信息",
                        defaultValue: "只能输入数字",
                        placeholder: "错误提示"
                    }
                ]
            },
            {
                label: "纯中文校验",
                rule: [
                    {
                        name: "pattern",
                        label: "校验规则",
                        type: "input",
                        defaultValue: "^[\\u4e00-\\u9fa5]+$",
                        placeholder: "eg:^[0-9]+$"
                    },
                    {
                        name: "message",
                        label: "错误提示信息",
                        type: "input",
                        defaultValue: "只能输入中文",
                        placeholder: "错误提示"
                    }
                ]
            },
            {
                label: "字母和数字校验",
                rule: [
                    {
                        name: "pattern",
                        label: "校验规则",
                        type: "input",
                        defaultValue: "^[a-zA-Z0-9]+$",
                        placeholder: "eg:^[0-9]+$"
                    },
                    {
                        name: "message",
                        label: "错误提示信息",
                        type: "input",
                        defaultValue: "只能输入字母和数字",
                        placeholder: "错误提示"
                    }
                ]
            },
            {
                label: "金额校验（无小数）",
                rule: [
                    {
                        name: "pattern",
                        label: "校验规则",
                        type: "input",
                        defaultValue: "^(0|[1-9]\\d+)$",
                        placeholder: "eg:^[0-9]+$"
                    },
                    {
                        name: "message",
                        label: "错误提示信息",
                        type: "input",
                        defaultValue: "只能输入整数",
                        placeholder: "错误提示"
                    }
                ]
            },
            {
                label: "金额校验（两位小数）",
                rule: [
                    {
                        name: "pattern",
                        label: "校验规则",
                        type: "input",
                        defaultValue: "^(0|[1-9]\\d+(\\.\\d{2})?)$",
                        placeholder: "eg:^[0-9]+$"

                    },
                    {
                        name: "message",
                        label: "错误提示信息",
                        type: "input",
                        defaultValue: "请输入正确的金额，保留2位小数",
                        placeholder: "错误提示"

                    }
                ]
            },
            {
                label: "自定义正则",
                rule: [
                    {
                        name: "pattern",
                        label: "校验规则",
                        type: "input",
                        defaultValue: "eg:^[0-9]+$",
                        placeholder: "eg:^[0-9]+$"
                    },
                    {
                        name: "message",
                        label: "错误提示信息",
                        type: "input",
                        defaultValue: "",
                        placeholder: "错误提示"
                    }
                ]

            }
        ],
        /**
         * 注册组件
         * @param name 组件名称
         * @param componentConfig 组件配置
         * @returns
         * */
        registerComponent: (name, componentConfig) => set((state) => {
            return {
                ...state,
                componentConfig: {
                    ...state.componentConfig,
                    [name]: componentConfig
                }
            }
        })
    }),
    {
        name: 'component-config', // 浏览器调试时显示的 store 名称
        enabled: false, // 是否开启调试工具(通常根据当前环境开启/关闭)
    },
));
